<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org" xmlns:cb="http://www.ossbar.com/">
<head th:include="layout/head" />
<div th:include="layout/foot"></div>
<script type="text/javascript" th:inline="javascript">
	cb.loadmodules([ "validate", "ajax", "lay" ]);
</script>
<script type="text/javascript" charset="utf-8"
		th:src="@{/plugins/ueditor/ueditor.config.js}"></script>
<script type="text/javascript" charset="utf-8"
	th:src="@{/plugins/ueditor/ueditor.all.js}"></script>
<script type="text/javascript"
	th:src="@{/plugins/ueditor/lang/zh-cn/zh-cn.js}"></script>
<script type="text/javascript"
	th:src="@{/jqautocomplete/jquery.autocomplete.js}"></script>
<style>
.autocomplete-suggestions {
    border: 1px solid #e4e4e4;
    background: #F4F4F4;
    cursor: default;
    overflow: auto
}
.autocomplete-suggestion {
    padding: 2px 5px;
    font-size: 1.2em;
    white-space: nowrap;
    overflow: hidden
}
.autocomplete-selected {
    background: #f0f0f0
}
.autocomplete-suggestions strong {
    font-weight: normal;
    color: #3399ff;
    font-weight: bolder
}
</style>
<body>
<form class="form-horizontal" id="tmailDetailForm" method="post" th:action="@{/mail/tmaildetail/sendEmail}" th:object="${tmailDetail}">
	<div class="panel-body">
		<!-- 按钮栏布局begin -->
		<div id="toolbar_area" class="toolbar_area" style="text-align:left">
			<a class="btn btn-default cb-btn" lay-filter="formDemo"
				href="javascript:void(0)" onclick="send()"><i
				class="glyphicon glyphicon-search"></i>&nbsp;发送</a> <a
				lay-filter="hasPermission('mail:tmaildetail:add')" class="btn btn-default cb-btn"
				onclick="save()"><i class="glyphicon glyphicon-plus"></i>&nbsp;保存</a>
			<!-- <a lay-filter="hasPermission('mail:tmaildetail:edit')" class="btn btn-default cb-btn"
				onclick="edit()"><i class="glyphicon glyphicon-edit"></i>&nbsp;附件</a> -->
		</div>
		<!-- 按钮栏布局end -->
	</div>
		<input type="hidden" name="tokenForm"
			th:value="${#session.getAttribute('tokenForm')}" />
		<input type="hidden" name="mid"
			th:value="*{mid}" />
		<table class="table table-bordered FormView cb-table-fun">
				<tr>
				<td class="cb-label" style="width: 100px">收件人：</td>
				<td class="cb-value" style="width: 95%"><textarea type="text"
					class="form-control cb-form-control validate[required,maxSize[100]]" data-msg=""
					id="to" name="to" placeholder="收件人" onkeypress="changeTo(event)"></textarea>
					<input id="oldToVal" type="hidden"/>
					</td>
				</tr>
				<tr>
				<td class="cb-label" style="width: 100px">抄送人：</td>
				<td class="cb-value"><textarea type="text"
					class="form-control cb-form-control validate[maxSize[100]]" data-msg=""
					id="cc" name="cc" placeholder="抄送人" onkeypress="changeCc(event)" ></textarea>
					<input id="oldCcVal" type="hidden"/>
					</td>
				</tr>
				<tr>
				<td class="cb-label" style="width: 100px">邮件主题：</td>
				<td class="cb-value"><input type="text"
					class="form-control cb-form-control validate[required,maxSize[200]]" data-msg=""
					id="msubject" name="msubject" th:field="*{msubject}" placeholder="邮件主题" /></td>
				</tr>
				<tr>
				<td colspan="2"></td>
				</tr>
				<tr>
				<td class="cb-value" colspan="2">
				<div id="mcontent" name="mcontent" style="width:100%;height:500px;"></div>
				</td>
				</tr>
		</table>
	</form>
</body>
<script type="text/javascript" th:inline="javascript">
	if([[${tmailDetail}]].receiverList && [[${tmailDetail}]].receiverList.length > 0){
		var list = [[${tmailDetail}]].receiverList;
		var tos="",ccs="",bccs="";
		for(var i=0; i<list.length; i++){
			if("TO"==list[i].mrType){
				if(list[i].mrName){
					tos=","+list[i].mrName+"<"+list[i].mrMail+">" + tos;
				}else{
					tos=","+list[i].mrMail + tos;
				}
			}else if("CC"==list[i].mrType){
				if(list[i].mrName){
					ccs=","+list[i].mrName+"<"+list[i].mrMail+">" + ccs;
				}else{
					ccs=","+list[i].mrMail + ccs;
				}
			}else if("BCC"==list[i].mrType){
				if(list[i].mrName){
					bccs=","+list[i].mrName+"<"+list[i].mrMail+">" + bccs;
				}else{
					bccs=","+list[i].mrMail + bccs;
				}
			}
		}
		if(tos){
			$("#to").val(tos.substr(1));
			$("#oldToVal").val(tos.substr(1));
		}
		if(ccs){
			$("#cc").val(ccs.substr(1));
			$("#oldCcVal").val(ccs.substr(1));
		}
	}
	function changeTo(e){
		var key = $(e)[0].key;
		if(key == "," || key == "，"){
			$("#oldToVal").val($("#to").val());
		}
	}
	function changeCc(e){
		var key = $(e)[0].key;
		if(key == "," || key == "，"){
			$("#oldCcVal").val($("#cc").val());
		}
	}
	var utils = (function () {
        return {
            escapeRegExChars: function (value) {
                return value.replace(/[|\\{}()[\]^$+*?.]/g, "\\$&");
            },
            createNode: function (containerClass) {
                var div = document.createElement('div');
                div.className = containerClass;
                div.style.position = 'absolute';
                div.style.display = 'none';
                return div;
            }
        };
    }())
	var keyWord = "";
	$("#to").autocomplete({
		"serviceUrl" : [[${ctx}]]+"/mail/tmaillinkman/query?page=1&limit=20",
		"dataType" : "json",
		"type" : "POST",
		"paramName" : "to",
		"noCache":true,
		"deferRequestBy": 200,
		"transformResult" : function(response, originalQuery) {
			keyWord = response.keyword||"";
			response.suggestions = $.map(response.page.list || [], function(item) {
				return {data : item.content, value: item.content, id: item.content};
			});
			return response;
		},
		"formatResult" : function(suggestion, currentValue) {
	        if (!currentValue) {
	            return suggestion.value;
	        }
	        var pattern = '(' + utils.escapeRegExChars(keyWord) + ')';
	        return suggestion.value
	            .replace(new RegExp(pattern, 'gi'), '<strong>$1<\/strong>')
	            .replace(/&/g, '&amp;')
	            .replace(/</g, '&lt;')
	            .replace(/>/g, '&gt;')
	            .replace(/"/g, '&quot;')
	            .replace(/&lt;(\/?strong)&gt;/g, '<$1>');
	    },
		"onSelect" : function(item) {
			var oldV = $("#oldToVal").val();
			if(oldV.indexOf(item.value) >= 0){
				$("#to").val(oldV);
				return false;
			}
			if(oldV){
				$("#to").val(oldV+","+item.value);
				$("#oldToVal").val(oldV+","+item.value);
			}
			else{
				$("#to").val(item.value);
				$("#oldToVal").val(item.value);
			}
		}
	});
	$("#cc").autocomplete({
		"serviceUrl" : [[${ctx}]]+"/mail/tmaillinkman/query?page=1&limit=20",
		"dataType" : "json",
		"type" : "POST",
		"paramName" : "to",
		"deferRequestBy": 200,
		"noCache":true,
		"transformResult" : function(response, originalQuery) {
			keyWord = response.keyword||"";
			response.suggestions = $.map(response.page.list || [], function(item) {
				return {data : item.content, value: item.content, id: item.content};
			});
			return response;
		},
		"formatResult" : function(suggestion, currentValue) {
	        if (!currentValue) {
	            return suggestion.value;
	        }
	        var pattern = '(' + utils.escapeRegExChars(keyWord) + ')';
	        return suggestion.value
	            .replace(new RegExp(pattern, 'gi'), '<strong>$1<\/strong>')
	            .replace(/&/g, '&amp;')
	            .replace(/</g, '&lt;')
	            .replace(/>/g, '&gt;')
	            .replace(/"/g, '&quot;')
	            .replace(/&lt;(\/?strong)&gt;/g, '<$1>');
	    },
		"onSelect" : function(item) {
			var oldV = $("#oldCcVal").val();
			if(oldV.indexOf(item.value) >= 0){
				$("#cc").val(oldV);
				return false;
			}
			if(oldV){
				$("#cc").val(oldV+","+item.value);
				$("#oldCcVal").val(oldV+","+item.value);
			}
			else{
				$("#cc").val(item.value);
				$("#oldCcVal").val(item.value);
			}
		}
	});
	if(vcontent){
		vcontent.destroy();
	}
	var vcontent = UE.getEditor("mcontent",{
	    toolbars: [
	    	['undo', 'redo', '|',
	            'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript',  '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'cleardoc', '|',
	            'customstyle', 'paragraph', 'fontfamily','fontsize','fullscreen','|','justifyleft', //居左对齐
	            'justifyright', //居右对齐
	            'justifycenter', //居中对齐
	            'justifyjustify',
	            'simpleupload', 'insertimage','insertvideo','attachment','snapscreen', 'emotion','fixedpic']
	    ],
	    autoHeightEnabled: true,
	    autoFloatEnabled: true,
	    pasteplain:true,
	    elementPathEnabled : false
	});
	var maSign = ([[${tmailDetail}]] && [[${tmailDetail.mcontent}]])?[[${tmailDetail.mcontent}]]:([[${maSign}]]||"");
	if(maSign != null){
		vcontent.ready(function() {//编辑器初始化完成再赋值  
			vcontent.setContent(maSign);
		});
	}
	//保存
	function save() {// save_click()

		cb.submit("#tmailDetailForm", "mail/tmaildetail/saveorupdate", function() {
			cb.alert("保存成功", function() {
				var mytab = parent.tab;
				mytab.deleteTab(mytab.getCurrentTabId());
			});
		}, {
			contentType : "application/x-www-form-urlencoded"
		})
	}
	//发送
	function send() {// save_click()

		cb.submit("#tmailDetailForm", "mail/tmaildetail/sendEmail", function() {
			cb.alert("发送成功", function() {
				var mytab = parent.tab;
				mytab.deleteTab(mytab.getCurrentTabId());
			});
		}, {
			contentType : "application/x-www-form-urlencoded"
		})
	}
</script>
</html>